<!-- eslint-disable vue/require-valid-default-prop -->
<script setup lang="ts">
import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
import { useUserStore } from '@/store/modules/user_store.ts'
import {$bus} from '@/event_bus/event_bus_index'
import * as deptApi from '@/api/dept/dept_api_index'
import { onMounted, ref, watchEffect } from 'vue';
import { storeToRefs } from 'pinia';
import { NslUtil4Vue } from '@/utils/NslUtil4Vue';
import { ElTree,ElCard,ElInput } from 'element-plus';


const userStore = useUserStore();
const { queryParamsRef } = storeToRefs(userStore)

const deptName = ref('')
const deptList = ref<TypeOptionI[]>([])
const deptTreeRef = NslUtil4Vue.componentRef(ElTree)

watchEffect(
    () => {
        deptTreeRef.value?.filter(deptName.value)
    },
    {
        flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
    },
)

/** 部门筛选 */
//data: TreeNodeData
function handleFilter(value: string, data: TreeNodeData) {
    if (!value) {
        return true
    }
    //明确类型
    const option = data as TypeOptionI
    return option.label.indexOf(value) !== -1
}

/** 部门树节点 Click */
function handleNodeClick(data: { [key: string]: any }) {
    queryParamsRef.value.deptId = data.value
    $bus.emit('user-table-query')
}

onMounted(async () => {
    const response = await deptApi.getDeptOptions()
    deptList.value = response.data
})
</script>
<template>
    <!-- 部门树 -->
    <el-card shadow="never">
        <el-input v-model="deptName" placeholder="部门名称" clearable>
            <template #prefix>
                <el-icon-search />
            </template>
        </el-input>

      <el-tree
            ref="deptTreeRef"
            class="mt-2"
            :data="deptList"
            :props="{ children: 'children', label: 'label', disabled: '' }"
            :expand-on-click-node="false"
            :filter-node-method="handleFilter"
            default-expand-all
            @node-click="handleNodeClick"
        /> 
    </el-card>
</template>
<style lang="scss" scoped></style>
